<template>
  <div class="">
    <Header></Header>
    <div class="main">
      <div class="body">
        <img src="/src/assets/image/rmbc.png" alt="" class="mTop40 nav_img">
        <div class="mTop20">
          <Scroll_view type="2" :scrollList="state.rankingCategoryList" @clickTab="clickTabFun"></Scroll_view>
        </div>
        <div class="mTop20">
          <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="tabPanFun">
            <el-tab-pane v-for="(item,index) of state.rankingCategoryTitleList" :label="item.translated_name"
                         :name="item.id" :key="index"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="mTop20" v-for="(item,index) in state.rankingIndexList" :key="index">
          <div class="items more">
            <img src="/src/assets/image/zj.png" alt="" class="more_img" style="">
            <div class="more_title mLeft8 c33">{{ item.translated_name }}</div>
            <div class="center more_icon mLeft20" @click="toHotChildrenRouterFun(item.category_id)">
              <div class="more_icon_text">Больше</div>
              <img class="more_icon_img" src="/src/assets/icons/arrow_right_blue.png" alt="">
            </div>
          </div>
          <div class="mTop20">
            <Product_list :list="item.list" type="3"></Product_list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from '../../components/Header/Header.vue';//引入的头部的主键
import Product_list from '../../components/Product_list/Product_list.vue'
import Scroll_view from '../../components/Scroll_view/Scroll_view.vue'
import {reactive, onMounted} from 'vue';
import {getRankingCategoryList, getRankingCategoryTitleList, getRankingIndexList} from "@/api/api.ts";
import {TabsPaneContext} from "element-plus";
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive({
  activeName: null,
  rankingCategoryList: [],
  rankingCategoryTitleList: [],
  rankingIndexList: []
})
const getRankingCategoryListFun = () => {
  getRankingCategoryList({}).then((res: any) => {
    if (res.errCode === 0) {
      state.rankingCategoryList = res.returnData.list
    }
  })
}
const getRankingCategoryTitleListFun = (topId: any) => {
  getRankingCategoryTitleList({categoryId: topId}).then((res: any) => {
    if (res.errCode === 0) {
      console.log(res)
      state.rankingCategoryTitleList = res.returnData
      state.activeName = res.returnData[0].id
      getRankingIndexListFun(res.returnData[0].id)
    }
  })
}
const getRankingIndexListFun = (topId: any) => {
  getRankingIndexList({recommendType: topId}).then((res: any) => {
    if (res.errCode === 0) {
      console.log(res)
      state.rankingIndexList = res.returnData
    }
  })
}
const toHotChildrenRouterFun = (topId:number) => {
  router.push({
    path: '/hot_children',
    query: {
      top:topId
    }
  })
}
const tabPanFun = (tab: TabsPaneContext) => {
  getRankingIndexListFun(tab.props.name)
}
const clickTabFun = (topId: any) => {
  getRankingCategoryTitleListFun(topId)
}
onMounted(() => {
  getRankingCategoryListFun()
})
</script>

<style lang="less" scoped>
:deep(.el-tabs__item) {
  font-family: Segoe UI, Segoe UI;
  font-weight: bold;
  font-size: 16px;
  //color: #333333;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-bottom: 23px;
}

:deep(.is-active) {
  color: #0070E9;
}

:deep(.el-tabs__nav-wrap:after) {
  display: none;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;

  .body {
    width: 1400px;

    .nav_img {
      width: 1400px;
      height: 320px;
    }

    .more {

      &_img {
        width: 23px;
        height: 24px;
      }

      &_title {
        font-family: PingFang SC;
        font-size: 22px;
        font-weight: 400;
        line-height: 22px;
      }

      &_icon {
        width: 88px;
        height: 26px;
        border-radius: 8px;
        background: #EBF7FF;
        cursor: pointer;

        &_text {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
          color: #2C5AA7;
        }

        &_img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>
